import React, { useEffect, useState } from 'react'
import { Sticky, NavBar, Toast, Stepper, Button, Cell, Checkbox, CountDown, Radio } from 'react-vant'
import { ArrowLeft, Arrow } from '@react-vant/icons';
import '../../css/jly/Zfbyes.css'
import { Price } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Zfbyes() {
    const navigate = useNavigate()
    //获取信息
    const [dataa, setDataa] = useState([])
    useEffect(() => {
        setDataa(JSON.parse(localStorage.getItem('orderData')))
    }, [])

    //复选框
    const [value, setValue] = useState(1)
    //倒计时结束修改订单状态
    let putOrderFlag = async () => {
        let arr = localStorage.getItem('orderID')
        let { data: { code } } = await axios.put('http://127.0.0.1:3000/putOrderFlag', { data: arr })
        if (code === 200) {
            navigate('/') //预留
            Toast('支付超时')
        }
    }
    //支付宝调用
    let navZf = async () => {
        if (value === 1) {

            let { data: { result, code } } = await axios.post('http://127.0.0.1:3000/pcpay',{data:dataa})   
            if (code === 200) {
                window.location.href = result
            }

        } else {
            Toast('暂未开通')
        }
    }
    return (
        <div className='zfbyes'>
            <Sticky>
                <NavBar
                    title="支付收银台"
                    leftText={<ArrowLeft />}
                    onClickLeft={() => navigate(-1)}
                    style={{ background: '#F9EAEF', border: 'none' }}
                />
            </Sticky>
            {/* <button onClick={() => { console.log(dataa); }}>sadf</button> */}
            <div className='Z_top'>
                <div className='Z_top_container'>
                    {/* <p><h3 style={{fontSize:'20px'}}><span>￥</span>799</h3></p> 
                    <p>支付剩余时间 000000</p> */}
                    <span>￥<span style={{ fontSize: '35px', fontWeight: 'bold' }}>{dataa.price}</span></span>
                    <br />
                    <div className='Z_top_container_time'>
                        <p>支付剩余时间&nbsp;</p>{/*15*60*1000*/}
                        <CountDown time={60 * 1000} onFinish={() => { putOrderFlag() }} />
                    </div>

                </div>

            </div>
            <div className='Z_body'>
                <Radio.Group defaultValue="1">


                    <div className='Z_body_container'>
                        <div className='Z_body_container_top'>
                            <img src='https://cdn7.axureshop.com/demo/1564251/images/%E6%94%B6%E9%93%B6%E5%8F%B0/u4059.png'></img><p>支付宝支付</p>
                        </div>
                        <div>
                            {/* <Checkbox checked={checked} onChange={setChecked}>
                            
                        </Checkbox> */}

                            <Radio name="1" onClick={() => { setValue(1) }}></Radio>

                        </div>
                    </div>
                    <div className='Z_body_container'>
                        <div className='Z_body_container_top' >
                            <img src='https://cdn7.axureshop.com/demo/1564251/images/%E6%94%B6%E9%93%B6%E5%8F%B0/u4063.png'></img><p>微信支付</p>
                        </div>
                        <div>
                            {/* <Checkbox checked={checked} onChange={setChecked}>
                            
                        </Checkbox> */}

                            <Radio name="2" onClick={() => { setValue(2) }}></Radio>


                        </div>
                    </div>
                    {/* <Cell title={<img src='https://cdn7.axureshop.com/demo/1564251/images/%E6%94%B6%E9%93%B6%E5%8F%B0/u4059.png'></img>+'支付宝支付'} value=''></Cell> */}
                </Radio.Group>
            </div>
            <Sticky position='bottom' offsetBottom={0}>
                <Button type='danger' style={{ width: '100%', position: 'fixed', bottom: '0' }} onClick={() => { navZf() }}>确定</Button>
            </Sticky>
        </div>
    )
}
